import React, { Component } from 'react';
let echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/graph');
require('echarts/lib/chart/pie');
require('echarts/lib/component/title')
require('echarts/lib/component/toolbox')
class Topography extends Component {
    state = {

    }
    componentDidMount() {
        let topoChart = echarts.init(document.getElementById('topo'));
        topoChart.setOption({
            series: [
                {
                    type: 'graph',
                    layout: 'none',
                    zoom: 1,
                    symbolSize: (data, params) => { if (params.name === '数据中心') { return 75} else { return 45 } },
                    roam: false,
                    itemStyle: {
                        color: (params) => { if (params.name === "数据中心") { return '#3399FF' } else { return '#FF80C0' } }
                    },
                    label: {
                        show: true,
                        position: 'inside',
                        fontSize: 12
                        /*  formatter:function(obj){
                             let objName=obj['name'];
                             let ele='';
                             for(let i=0;i<objName.length;i++){
                                 ele+=objName[i]+'\n'
                             }
                             return ele;
                         }, */
                    },
                    data: [
                        {
                            name: '应用系统1',
                            x: 537.3654,
                            y: 462.6346,
                        },
                        {
                            name: '数据中心',
                            x: 700,
                            y: 300
                        },
                        {
                            name: '应用系统2',
                            x: 537.3654,
                            y: 137.3654
                        },
                        {
                            name: '应用系统3',
                            x:700,
                            y: 70
                        },
                        {
                            name: '应用系统4',
                            x: 862.6346,
                            y: 137.3654
                        },
                        {
                            name: '应用系统5',
                            x: 930,
                            y: 300
                        },
                        {
                            name: '应用系统6',
                            x: 862.6346,
                            y: 462.6346
                        },
                        {
                            name: '应用系统7',
                            x: 700,
                            y: 530
                        },
                        {
                            name: '应用系统8',
                            x: 470,
                            y: 300
                        }

                    ],
                    links: [{
                        source: '数据中心',
                        target: '应用系统1',
                    }, {
                        source: '数据中心',
                        target: '应用系统2',
                    }, {
                        source: '数据中心',
                        target: '应用系统3'
                    }, {
                        source: '数据中心',
                        target: '应用系统4'
                    }, {
                        source: '数据中心',
                        target: '应用系统5'
                    }, {
                        source: '数据中心',
                        target: '应用系统6'
                    },
                    {
                        source: '数据中心',
                        target: '应用系统7'
                    },
                    {
                        source: '数据中心',
                        target: '应用系统8'
                    }

                    ],
                    lineStyle: {
                        opacity: 0.9,
                        width: 2,
                        curveness: 0,
                        color: '#2E81D7'
                    }
                }
            ]
        })
    }
    
    render() {
        var point = []; //结果
/*
* 求圆周上等分点的坐标
* ox,oy为圆心坐标
* r为半径
* count为等分个数
*/
function getPoint(r, ox, oy, count){
    var radians = (Math.PI / 180) * Math.round(360 / count), //弧度
        i = 0;
    for(; i < count; i++){
        var x = ox + r * Math.sin(radians * i),
            y = oy + r * Math.cos(radians * i);

        point.unshift({x:x,y:y}); //为保持数据顺时针
    }
}

getPoint(230,700,300,8);
console.log(point)
        return (
            <div id="topo"></div>
        )
    }
}
export default Topography;